<template>
  <div class="decorateFormMain" v-if="controls && controls.length > 0">
    <div
      class="componentItem"
      v-for="(control, index) in controls"
      :key="control.id"
      :class="control.active&&control.ename!='page'?control.active:''"
      @click="chooseThis(control)"
    >
      <component
        v-if="control.ename!='page'"
        v-bind:is="control.controlName"
        :item="JSON.stringify(control)"
      ></component>

      <el-popconfirm
        confirmButtonText="确认"
        cancelButtonText="取消"
        icon="el-icon-info"
        iconColor="red"
        title="确认删除该表单吗？"
        @confirm="delControl(control)"
      >
        <span slot="reference">删除</span>
      </el-popconfirm>
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
export default {
  name: "DecorateFormMain",
  data() {
    return {
      visible: false,
      controls: null,
    };
  },
  created() {},
  props: ["controlData"],
  components: {
    areaComponent: () => import("./components/areaComponent.vue"),
    checkboxComponent: () => import("./components/checkboxComponent.vue"),
    dateComponent: () => import("./components/dateComponent.vue"),
    dateRangeComponent: () => import("./components/dateRangeComponent.vue"),
    dateTimeComponent: () => import("./components/dateTimeComponent.vue"),
    dateTimeRangeComponent: () => import("./components/dateTimeRangeComponent.vue"),
    idCardComponent: () => import("./components/idCardComponent.vue"),
    imageComponent: () => import("./components/imageComponent.vue"),
    inputComponent: () => import("./components/inputComponent.vue"),
    phoneComponent: () => import("./components/phoneComponent.vue"),
    radioComponent: () => import("./components/radioComponent.vue"),
    selectComponent: () => import("./components/selectComponent.vue"),
    areaComponent: () => import("./components/areaComponent.vue"),
    textareaComponent: () => import("./components/textareaComponent.vue"),
    timeComponent: () => import("./components/timeComponent.vue"),
    timeRangeComponent: () => import("./components/timeRangeComponent.vue"),
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    Bus.$on("updateMain", () => {
      this.controls = JSON.parse(localStorage.getItem("setFormContent"));
    });
  },
  methods: {
    //页面初始化
    init() {
      this.controls = JSON.parse(localStorage.getItem("setFormContent"));
    },
    //删除控件
    delControl(control) {
      let index = -1, type="";
      this.controls.forEach((row,idx) => {
          if(row.id == control.id) {
            this.controls.active="";
            if(this.controls[idx-1]) {
              index = idx-1;
              this.controls[index].active="on";
            }else if(this.controls[idx+1]) {
              index = idx+1;
              type = "jia";
              this.controls[index].active="on";
            }
          }
      })
      this.controls = this.controls.filter((con) => con.id != control.id);
      localStorage.setItem("setFormContent", JSON.stringify(this.controls));
      Bus.$emit("updateRight");
      if(index>=0) {
        if(type=="jia") {
          index--;
        }
        this.$parent.control = this.controls[index];
      }else{
        this.$parent.control = null;
      }
    },
    //点击选中当前控件
    chooseThis(control) {
      let index = -1;
      if(control.ename != 'page') {
        control.active = ""
        this.$parent.headControl.active = "";
      }
      this.controls.forEach((item,idx) => {
        if(item.id == control.id) {
          index = idx;
          item.active = "on"
        } else {
          item.active = ""
        }
      })
      this.$parent.control = this.controls[index];
      localStorage.setItem("setFormContent", JSON.stringify(this.controls));
      Bus.$emit("updateRight");
    }
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang="scss">
.decorateFormMain {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .componentItem {
    width: 100%;
    position: relative;
    &:hover,&.on {
      outline: 1px solid #0079fe;
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
.decorateFormMain {
  .componentItem {
    & > span {
      position: absolute;
      top: -1px;
      right: -31px;
      z-index: 2;
      width: 30px;
      height: 16px;
      background-color: red;
      font-size: 12px;
      color: #fff;
      display: none;
      text-align: center;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    &:hover,
    &.on {
      & > span {
        display: flex;
      }
    }
  }
}
</style>
